@import 'public';

.list-main{
    .breadcrumbs{
        background-color: #FAFAFA;
        height: 40px;
        line-height: 40px;
        .wrapper{
            a{
                font-size: 12px;
                color: #757575;
            }
            .iconfont{
                font-size: 12px;
                margin: 0 6px;
            }
        }
    }
    // 分类导航
    .search-filter{
        height: 84px;
        padding: 18px 0;
        -webkit-user-select: none;
        .wrapper{
            span{
                display: inline-block;
                color: #b0b0b0;
                font-size: 14px;
                padding: 14px 0;
            }
            ul{
                display: inline-block;
                padding: 0 60px 0 124px;
                li{
                    display: inline-block;
                    width: 148px;
                    height: 48px;
                    padding: 14px 0;
                    cursor: pointer;
                }
                li:hover{
                    color: $color;
                }
            }
        }
    }
    // 显示结果
    .search-result{
        background-color: #FAFAFA;
        padding: 20px 0 100px;
        -webkit-user-select: none;
        .wrapper{
            
            .order-list{
                height: 30px;
                margin: 20px 0;
                .order-active{
                    height: 30px;
                    li{
                        display: inline-block;
                        border-right: 1px solid #E0E0E0;
                        width: 148px;
                        height: 30px;
                        vertical-align: top;
                        text-align: center;
                        cursor: pointer;
                        // .list{
                        //     width: 148px;
                        //     display: inline-block;
                        //     li{
                        //         height: 30px;
                        //         display: block;
                        //     }
                        // }
                    }
                    div{
                        display: inline-block;
                        width: 148px;
                        text-align: center;
                        cursor: pointer;
                        height: 100px;
                        
                        .list{
                            display: none;
                            z-index: 999;
                            position: absolute;
                            height: 100px;
                            background-color: #fff;
                            li{
                                height: 50px;
                                line-height: 50px;
                                border-bottom: 1px solid #E0E0E0;
                            }
                        }
                    }
                    .number,.money{
                        border-right: 1px solid #E0E0E0;
                    }
                    .show-all{
                        color: $color;
                    }
                    li:hover{
                        color: $color;
                    }
                }
            }
            // 商品列表
            .order-content{
                display: flex;
                flex-wrap: wrap;
                
                .items{
                    background-color: #fff;
                    margin-right: 10px;
                    margin-bottom: 14px;
                    width: 296px;
                    height: 430px;
                    text-align: center;
                    padding-top: 47px;
                    border: 1px solid #E7E7E7;
                
                    a{
                        img{
                            width: 200px;
                            height: 200px;
                            margin-bottom: 16px;
                        }
                        h2{
                            font-weight: normal;
                            font-size: 14px;
                            color: #757575;
                        }
                        p{
                            font-size: 14px;
                            margin-bottom: 15px;
                            color: $color
                        }
                    }
                    transition: 0.5s;
                    -webkit-transition: 0.5s;
                    -moz-transition: 0.5s;
                    -ms-transition: 0.5s;
                    -o-transition: 0.5s;
}
                    .items:hover{
                        box-shadow: 0px 5px 20px 1px #78797B;
                            transform: translateY(-10px);
                            -webkit-transform: translateY(-10px);
                            -moz-transform: translateY(-10px);
                            -ms-transform: translateY(-10px);
                            -o-transform: translateY(-10px);
                    }
            }
            // 分页
            .page{
                text-align: center;
                height: 60px;
                padding: 15px 0;
                -webkit-user-select: none;
                .prev , .next{
                    display: inline-block;
                    color: #B5B1B0;
                    width: 48px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    font-size: 24px;
                    transition: 0.2s;
                    -webkit-transition: 0.2s;
                    -moz-transition: 0.2s;
                    -ms-transition: 0.2s;
                    -o-transition: 0.2s;
                }
                span{
                    width: 48px;
                    height: 30px;
                    line-height: 30px;
                    display: inline-block;
                    color: #b5b1b0;
                    text-align: center;
                    font-size: 20px;
                    transition: 0.2s;
                    -webkit-transition: 0.2s;
                    -moz-transition: 0.2s;
                    -ms-transition: 0.2s;
                    -o-transition: 0.2s;
                }
                span:hover{
                    background-color: #B0B0B0;
                    color: #fff;
                }
                .prev:hover{
                    background-color: #B0B0B0;
                    color: #fff;
                }
                .next:hover{
                    background-color: #B0B0B0;
                    color: #fff;
                }
                .on{
                    background-color: #757575;
                }
                .off{
                    background-color: #FAFAFA;
                }
                
            }
        }
    }
}